<template>
	<div class="loading" :class="row ? 'row' : ''">
		<div class="load-text"  v-show="more">
			<img class="img" width="24" height="24" src="./loading.gif" v-show="showImg">
			<p class="desc">{{title}}</p>
		</div>
		<div class="title" v-show="!more">
			<h3>我是有底线的</h3> 
			<span  class="line"></span>
		</div>
	</div>
</template>

<script type="text/javascript">
export default {
  props: {
    title: {
      type: String,
      default: "正在载入，请稍后..."
    },
    row: {
      type: Boolean,
      default: false
    },
    showImg: {
      type: Boolean,
      default: true
    },
	more:{
	  type: Boolean,
    default: true
	}
  }
};
</script>

<style type="text/css" lang="scss" scoped>
@import "~styles/mixins.scss";
@import "~styles/variable.scss";
.loading {
  width: 100%;
  height:1.6rem;
  line-height:1.2rem;
  padding: 0.2rem 0;
  margin: auto;
  text-align: center;
  background:#f8f8f8;
  &.row img,&.row .desc{ 
      display: inline-block;
      vertical-align: middle;
  }
  .img {
    width: 24px;
    height: 24px;
    display: inline-block;
  }
  .desc {
    font-size: $font-size-s;
    color: $color-gray;
  }
}
.title {
  text-align: center;
  position: relative;
}
h3 {
  display: inline-block;
  position: relative;
  padding: 0 0.2rem;
  z-index: 99;
  background: #f8f8f8;
  color: #ddd;
}
.line {
  position: absolute;
  left: 50%;
  width: 60%;
  top: 54%;
  transform: translate(-50%, -50%);
  &:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0.4rem;
    right: 0.4rem;
    display: block;
    border-top: 1px solid #ddd;
  }
}
</style>
